import React, { useRef, useEffect } from 'react'
import Editor from 'wangeditor'
import {
  Button,
} from 'antd'

export default function Introduction() {
  // 引用编辑器的DOM容器
  const editorRef = useRef()

  // 引用编辑器实例
  const editorInstance = useRef(null)

  // 组件挂载结束后，创建编辑器对象
  useEffect(() => {
    // 创建编辑器对象
    const editor = new Editor(editorRef.current)
    // 保存到 ref 中
    editorInstance.current = editor
    // 配置
    editor.config.height = 200
    // 渲染
    editor.create()

    // componentWillUnmount()
    return () => {
      editor.destroy()
    }
  }, [])

  const saveIntroduction = () => {
    console.log('保存，', editorInstance)
    const html = editorInstance.current.txt.html()
    console.log('html 文本：', html)
  }

  return (
    <div>
      Introduction-医院介绍
      <div ref={editorRef}></div>
      <Button type="primary" onClick={saveIntroduction}>保存</Button>
    </div>
  )
}
